<template>
  <!-- 工作计划情况 -->
  <a-spin :spinning="loading">
    <a-card>
      <title-name v-once :title="title"></title-name>
      <div style="padding: 12px">
        <Empty v-if="!Object.keys(list) || !Object.keys(list).length" description="暂无数据" />
        <div v-for="(item, index) in list" :key="index">
          <div class="branchName">{{ index }}</div>
          <!-- 上月工作计划完成情况 -->
          <template>
            <title-name v-once :title="`${$route.query.month}月工作计划完成情况`"></title-name>
            <a-table class="mb20" bordered :pagination="false" :columns="columns" :dataSource="item.lashPlan || []"></a-table>
          </template>
          <!-- 当月工作计划 -->
          <title-name v-once :title="`${Number($route.query.month) + 1}月工作计划`"></title-name>
          <a-button v-if="($route.query.editModel == 2 || $route.query.editModel == 4) && (queryParam.branchComId || queryParam.type === '8')" class="mb20" type="primary" icon="plus" @click="handleAdd(item)"
            >添加计划</a-button
          >
          <a-table bordered :pagination="false" :columns="columns2" :dataSource="item.thisPlan">
            <a slot="actions" slot-scope="text, record, index" class="del_btn" @click="handleRemove({ list: item.thisPlan, index, id: record.id })"> 删除 </a>
          </a-table>
        </div>
      </div>
    </a-card>
  </a-spin>
</template>

<script>
import { getBranchWorkPlan, deleteWorkPlan, updateBranchWorkPlan } from '@/api/quality/qualityMonth' // api
import { Empty } from 'ant-design-vue' // 无数据提示
export default {
  name: 'WorkPlans',
  props: {
    // 业务id
    id: {
      type: [String, Number],
      default: () => ''
    },
    // 分公司id
    branchComId: {
      type: [String, Number],
      default: () => ''
    }
  },
  components: {
    Empty
  },
  props: {
    // 请求参数
    queryParam: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      loading: false, // 加载控件
      title: { 7: '分公司', 8: '公司技术质量部' }[this.queryParam.type] + '工作计划',
      list: {} // 列表
    }
  },
  computed: {
    // 上月工作计划表头
    columns() {
      let isEdit = (this.queryParam.branchComId || this.queryParam.type === '8') && (this.$route.query.editModel == 2 || this.$route.query.editModel == 4) // 节点若为分公司且操作状态时填报或调整Î
      let columns = [
        {
          title: '序号',
          width: 80,
          align: 'center',
          dataIndex: 'index',
          customRender() {
            return arguments[2] + 1
          }
        },
        {
          dataIndex: 'workPlan',
          title: '工作计划'
        },
        {
          title: '完成情况',
          dataIndex: 'completion',
          customRender: (text, record) => {
            return isEdit ? <BaseTextarea v-model={record.completion} /> : text
          }
        }
      ]
      return columns
    },
    // 本月工作计划表头
    columns2() {
      let isEdit = (this.queryParam.branchComId || this.queryParam.type === '8') && (this.$route.query.editModel == 2 || this.$route.query.editModel == 4) // 节点若：1、为分公司；2、为公司；且操作状态时填报或调整Î
      let columns = [
        {
          title: '序号',
          width: 80,
          align: 'center',
          dataIndex: 'index',
          customRender() {
            return arguments[2] + 1
          }
        },
        {
          title: '工作计划',
          dataIndex: 'workPlan',
          customRender: (text, record) => {
            return isEdit ? <BaseTextarea v-model={record.workPlan} /> : text
          }
        }
      ]
      if (isEdit) {
        columns.push({
          title: '操作',
          dataIndex: 'actions',
          width: '80px',
          align: 'center',
          scopedSlots: { customRender: 'actions' }
        })
      }
      return columns
    }
  },
  mounted() {
    // 初始化
    this.init()
  },
  methods: {
    /**
     * 移除行
     * list：列表
     * index：索引值
     * id：业务id（若id存在则是原有数据删除，否则是新增删除）
     */
    handleRemove({ list, id, index }) {
      this.$confirm({
        title: '提示',
        content: '确定删除？',
        onOk: () => {
          if (id) {
            return deleteWorkPlan({ id }).then((res) => {
              if (res.code === '0') {
                this.init()
                this.$message.success('删除成功！')
              }
            })
          } else {
            list.splice(index, 1)
          }
        }
      })
    },
    /**
     * 添加当前月工作计划
     * item：业务对象
     */
    handleAdd(item) {
      if(!item.thisPlan?.length){
        item.thisPlan = []
      }
      item.thisPlan?.push({
        key: 'thisPlan' + Date.now()
      })
    },
    /**
     * 初始化
     */
    init() {
      this.loading = true
      // 请求详情
      getBranchWorkPlan(this.queryParam)
        .then((res) => {
          if (res?.code === '0') {
            // 映射列表表格信息
            this.list = res.data || {}
            // 设置表格唯一标识
            for (let index in this.list) {
              let item = this.list[index] // 当前分公司详情列表
              item.lashPlan?.forEach((item, index) => {
                item.key = 'lashPlan' + index
              })
              item.thisPlan?.forEach((item, index) => {
                item.key = 'thisPlan' + index
              })
            }
            // 当：1、数据为空，2、是分公司节点，3、是填报或调整操作时；添加一条当前分公司的空数据以供添加数据
            if (!Object.keys(this.list).length && this.queryParam.branchComId && (this.$route.query.editModel == 2 || this.$route.query.editModel == 4)) {
              this.list = {
                [this.queryParam.nodeName]: { thisPlan: [], lashPlan: [] }
              }
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 提交表单（两个请求，一个完成情况的编辑接口，一个工作计划的新增接口，设计的确不合理，已沟通，维持这样）
     */
    handleSubmit() {
      // 校验表单
      for (let index in this.list) {
        let item = this.list[index] // 当前分公司详情列表
        let form =
          item.thisPlan?.map((i) => {
            return {
              ...i,
              yearMonth: this.queryParam.monthTime,
              qualityMonthId: this.$route.query.id,
              isAdjust: this.$route.query.isAdjust,
              branchComId: this.queryParam.branchComId,
              branchComName: index,
              type: this.queryParam.type
            }
          }) || {} // 表单
        // 若上月有计划
        if (item.lashPlan?.length) {
          // 添加上月计划到表单
          form = [
            ...form,
            ...item.lashPlan.map((i) => {
              return {
                ...i,
                qualityMonthId: this.$route.query.id,
                isAdjust: this.$route.query.isAdjust,
                branchComId: this.queryParam.branchComId,
                branchComName: index,
                type: this.queryParam.type
              }
            })
          ]
          // 校验上月完成情况表单
          for (let i in item.lashPlan) {
            if (!item.lashPlan[i].completion) {
              this.$message.warning(`请填写${index + this.$route.query.month}月工作计划第${Number(i) + 1}行完成情况！`)
              return
            }
          }
        }

        // 若本月有计划
        if (item.thisPlan.length) {
          // 校验本月工作计划表单
          for (let i in item.thisPlan) {
            if (!item.thisPlan[i].workPlan) {
              this.$message.warning(`请填写${index + (Number(this.$route.query.month) + 1)}月工作计划第${Number(i) + 1}行工作计划！`)
              return
            }
          }
        } else {
          this.$message.warning(`${index + (Number(this.$route.query.month) + 1)}月工作计划不能为空！`)
          return
        }

        this.$confirm({
          title: '提示',
          content: '确认提交，提交后不可撤销？',
          onOk: () => {
            // 提交上月完成情况
            this.$emit('submitLoading', true)
            return updateBranchWorkPlan(form).then((res) => {
              if (res.code === '0') {
                this.$message.success('提交成功！')
                this.init()
              }
            }).finally(() => {
              this.$emit('submitLoading', false)
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.branchName {
  padding: 12px 0;
  text-align: center;
  font-weight: bolder;
}
/deep/textarea {
  &.ant-input {
    border-color: #e4ac0b;
    background-color: #fff9e8;
  }
}
</style>
